<template>
  <view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
    <view class="w-full bg-[var(--page-bg-color)]">
      <view class="pb-[210rpx] relative" :style="headerStyle">
        <!-- #ifdef MP-WEIXIN -->
        <!-- <top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" /> -->
        <!-- #endif -->
        <view class="text-[70rpx] leading-[90rpx] text-[#fff] pl-[60rpx] font-500 pt-[77rpx] price-font">
          &nbsp;</view>

      </view>
      <view class="sidebar-margin flex flex-col mt-[-178rpx] relative">
        <view
          class="w-[322rpx] h-[80rpx] text-[30rpx] text-[#333] font-500 box-border pl-[30rpx] pt-[var(--pad-top-m)] rounded-tl-[var(--rounded-big)] overflow-hidden mb-[-2rpx]"
          :style="{ backgroundImage: 'url(' + img('static/resource/images/member/point/top_bg.png') + ') ', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }">
          <text class="leading-[42rpx]">{{ detail.project }}照片对比</text>
        </view>
        <view
          class="flex items-center  justify-center px-[30rpx] rounded-[var(--rounded-big)] !rounded-tl-none bg-[#fff] h-[173rpx] box-border">


          <button class="rounded-[40rpx] flex-center !bg-transparent text-[32rpx] font-500"
            :style="{ width: '490rpx', height: '80rpx', border: 'none', color: '#fff', backgroundImage: `url(${img('static/resource/images/app/button_bg2.png')})`, backgroundSize: '100%', backgroundRepeat: 'no-repeat' }"
            shape="circle" @click="state.isShowSetLogCare = true">
            <text>添加照片对比</text>
          </button>
        </view>
      </view>
    </view>


    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getListFn">
      <view class="sidebar-margin card-template  my-[var(--top-m)]" v-if="list.length">
        <zero-timeline :dataList='list' class="!p-[0]" :showLeft="false">
          <template #content="{ content }">
            <view class="flex flex-wrap mt-[10rpx]">
              <view v-for="(imageItem, imageIndex) in content.nurseLog" class="mb-[10rpx]"
                :class="{ 'mr-[10rpx]': (imageIndex + 1) % 3 != 0 }">
                <u--image width="150rpx" height="150rpx" :src="img(imageItem)" model="aspectFill"
                  :radius="'var(--goods-rounded-big)'" @click="imgListPreview(content.nurseLog[imageIndex])">
                  <template #error>
                    <u-icon name="photo" color="var(--text-color-light9)" size="50"></u-icon>
                  </template>
                </u--image>
              </view>
            </view>
          </template>
        </zero-timeline>

      </view>
      <mescroll-empty :option="{ tip: '暂无护理日志' }" v-if="!list.length && loading"></mescroll-empty>
    </mescroll-body>

  </view>
  <!-- 水印 -->
  <watermark></watermark>
  <!-- 设置目标 -->
  <view @touchmove.prevent.stop>
    <u-popup class="weight-popup" :closeable="true" :show="state.isShowSetLogCare"
      @close="state.isShowSetLogCare = false" zIndex="999999">
      <view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
        <view class="title !pb-[30rpx]">添加照片对比</view>
        <scroll-view class="h-[70vh]" scroll-y="true">
          <view class="px-[var(--popup-sidebar-m)] pt-[30rpx]">
            <u-form labelPosition="top" :model="state.model" :rules="rules" labelWidth="200rpx"
              :labelStyle="{ 'font-size': '32rpx' }" ref="formRef">
              <view class="mt-[10rpx]">
                <u-form-item :label="`照片组`" prop="nurseLog">
                  <upload-img class="mt-[20rpx]" v-model="state.model.nurseLog" :max-count="9" :multiple="true" />
                </u-form-item>
              </view>
              <view class="mt-[10rpx]">
                <u-form-item :label="`对比说明`" prop="dailyRecord">
                  <u-textarea fontSize="32rpx" v-model.trim="state.model.dailyRecord" count
                    placeholder-class="!text-[var(--text-color-light9)] text-[32rpx]" clearable
                    placeholder="请输入对比说明"></u-textarea>
                </u-form-item>
              </view>

            </u-form>
          </view>
        </scroll-view>
        <view class="btn-wrap">
          <button class="primary-btn-bg btn" @click="confirmFn">确定</button>
        </view>
      </view>
    </u-popup>

  </view>
</template>


<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { t } from '@/locale'
import { redirect, img, pxToRpx, goback } from '@/utils/common';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import uploadImg from '@/addon/shopMemberInfo/components/upload-img.vue'


import { getContrastBuyId, createContrastLog } from '@/app/api/member';
import { topTabar } from '@/utils/topTabbar'
import useMemberStore from '@/stores/member';
import { timeFormat } from '@/utils/formatting';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({ title: '护理日志' })
/********* 自定义头部 - end ***********/

// 获取系统状态栏的高度
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
const headerStyle = computed(() => {
  return {
    backgroundImage: 'url(' + img('static/resource/images/member/point/point_bg.png') + ') ',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'bottom',
    // paddingTop:Object.keys(menuButtonInfo).length?(Number(menuButtonInfo.height) * 2 + menuButtonInfo.top * 2 + 77)+'rpx':'77rpx',
  }
})
const topStyle = computed(() => {
  let style = Object.keys(menuButtonInfo).length ? (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + 50) + 'rpx;' : '50rpx'
  return style
})

const state = reactive({
  isShowSetLogCare: false,
  model: {
    pid: undefined,

    nurseLog: [],
    dailyRecord: ''
  },

})
const rules = computed(() => {
  return {

  }
})
const create_time = ref([])
const detail = ref({
  project: ''
})
const list = ref<Array<any>>([]);
const loading = ref<boolean>(false);
const recordId = ref()
const getListFn = (mescroll: any) => {
  let data = {
    // pageNo: mescroll.num,
    // pageSize: mescroll.size,
    id: recordId.value

  };
  loading.value = false;
  getContrastBuyId(data).then((res: any) => {
    detail.value = res.data
    let newArr = res.data.items;

    console.log(newArr)
    mescroll.endSuccess(newArr.length);
    //设置列表数据
    if (mescroll.num == 1) {
      list.value = []; //如果是第一页需手动制空列表
    }
    newArr.forEach((item: any) => {
      item.time = `${timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')} ${item.operatorId}`
      item.content = item.project
      item.sub = `说明:${item.dailyRecord}`
    })

    list.value = list.value.concat(newArr);
    list.value = list.value.map(item => {
      item.flag = true
      return item
    })
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}
//预览图片
const imgListPreview = (item: any) => {
  if (item === '') return false
  var urlList = []
  urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
  console.log(urlList)
  uni.previewImage({
    indicator: "number",
    loop: true,
    urls: urlList
  })
}




// 确定时间筛选
const confirmFn = async () => {
  state.model.pid = recordId.value
  await createContrastLog(state.model);
  uni.showToast({
    title: '添加成功',
    icon: "none"
  })
  state.isShowSetLogCare = false
  state.model = {
    pid: undefined,
    nurseLog: [],
    dailyRecord: ''
  }
  getMescroll().resetUpScroll();
}
// const info = computed(() => {
// 	// 装修模式

// 	return memberStore.info;
// })

onLoad((option: any) => {
  if (option.id) {
    recordId.value = option.id
  } else {
    let parameter = {
      url: '/addon/shopMemberInfo/pages/PhotosComparison',
      title: '缺少id'
    };
    goback(parameter)
  }
})

</script>

<style lang="scss" scoped>
.bg-color {
  background-color: rgba(102, 102, 102, 0.4);
}
</style>
